<!-- 后台管理，树型插件 -->
<template>
  <Tree :data="tree_data"
        :load-data="loadData"
        @on-select-change="selectChange"
        :render="renderContent"
        :multiple="isMultiple"></Tree>
</template>
<script>
  export default {
    data: function () {
      return {
        tree_checked: [],
        checked_node: false
      }
    },
    props: {
      tree_data: {
        type: Array,
        required: true
      },
      isMultiple: {
        type: Boolean,
        required: true
      }
    },
    methods: {
      loadData: function (item, callback) {
        //调用父组件的加载数据数据方法
        this.$emit("onLoadTreeData", item, callback);
      },
      /**
       * 点击树节点的方法
       * @param item 选中的节点
       */
      selectChange: function (item) {
        //调用父组件预定义的点击方法
        this.$emit("onNodeClick", item);
        this.checked_node = item.id;
      },
      /**
       * 获得树状组件勾选中的节点
       */
      getCheckNodes: function () {
        return this.tree_checked;
      },
      renderContent(h, {root, node, data}) {
        if (data.icon) {
          var hh = [
            h('Icon', {
              props: {
                type: data.icon,
                size: 15
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', {
              style: {
                cursor: 'pointer'
              },
              on: {
                click: () => {
                  this.selectChange(data);
                }
              }
            }, data.title)
          ];
          if (this.isMultiple) {//多选树

            //这里比较重要，在这里要将现有的选中的节点放入到集合中
            //但是这个nodeKey有可能只放了11，那么前面就都是空的，在后台的地方需要处理一下，去空的排除掉
            //示例：[,,,,,,,,,,1,,3,,4]
            if (data.isChecked >= 1) {
              this.tree_checked[data.nodeKey] = data.id;
            }

            hh = [
              h('Checkbox', {
                props: {
                  value: data.isChecked >= 1
                },
                on: {
                  //checkbox状态改变时触发的方法
                  //@params status
                  //        状态改变时，如果status=false说明用户取消选中,如果status=true，说明是选中操作
                  "on-change": (status) => {
                    if (status == true) {//如果是用户选中，那么设置值到数组中
                      this.tree_checked[data.nodeKey] = data.id;
                    } else {
                      this.tree_checked.splice(data.nodeKey, 1);
                    }
                  }
                }
              }, ''),
              h('Icon', {
                props: {
                  type: data.icon,
                  size: 15
                },
                style: {
                  marginRight: '8px'
                }
              }),
              h('span', {
                style: {
                  cursor: 'pointer'
                },
                class: {
                  // 初始化的时候this.checked_node == data.id返回的是假
                  // 在selectChange方法中，将this.checked_node复制为当前选中的id,那么条件变为真
                  // 即可以增加上选中的样式
                  "ivu-tree-title-selected": this.checked_node == data.id,
                  "ivu-tree-title": true
                },
                on: {
                  click: () => {
                    this.selectChange(data);
                  }
                },
              }, data.title)
            ];
          }

          //树中包含图标,显示图标
          return h('span', {
            style: {
              display: 'inline-block'
            },
            class: {
              // 初始化的时候this.checked_node == data.id返回的是假
              // 在selectChange方法中，将this.checked_node复制为当前选中的id,那么条件变为真 即可以增加上选中的样式
              "ivu-tree-title-selected": this.checked_node == data.id,
              "ivu-tree-title": true
            },
          }, [
            h('span', hh)
          ]);

        } else {
          //树中不包含图标，直接显示文字
          return h('span', {
            style: {
              cursor: 'pointer'
            },
            class: {
              // 初始化的时候this.checked_node == data.id返回的是假
              // 在selectChange方法中，将this.checked_node复制为当前选中的id,那么条件变为真 即可以增加上选中的样式
              "ivu-tree-title-selected": this.checked_node == data.id,
              "ivu-tree-title": true
            },
            on: {
              click: () => {
                this.selectChange(data);
              }
            }
          }, data.title);
        }
      }
    }
  }
</script>
<style scoped>
  .ivu-tree-title-selected, .ivu-tree-title-selected:hover {
    background-color: #d5e8fc;
  }

  .ivu-tree-title {
    display: inline-block;
    margin: 0;
    padding: 0 4px;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
    color: #495060;
    transition: all .2s ease-in-out;
  }


</style>
